<template>
  <div>
    <el-upload
      class="upload-demo"
      drag
      :limit="1"
      :before-upload="handleBeforeUploadVideo"
      :http-request="requestFile"
      :on-remove="removeFile"
      action="">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <!-- 进度条 -->
    <el-progress  v-if="progressFlag" :percentage="loadProgress"></el-progress>
    <el-button id="myBtn" v-if="progressFlag" size="mini">{{buttonText}}</el-button>
  </div>
</template>


<script>
import { getUpToken } from "@/api/file/upload";
import { v4 as uuidv4 } from 'uuid';
import * as qiniu from 'qiniu-js'
export default {
  data() {
    return {
      fileName:'',
      loadProgress: 0, // 动态显示进度条
      progressFlag: false, // 关闭进度条
      buttonText: "暂停上传",
      upToken:null,
      images:null,
      domainAddress:'http://rcdkvzv4v.hn-bkt.clouddn.com/'
    };
  },
  methods: {
    //移除文件
    removeFile() {
      this.progressFlag = false;
      this.buttonText = "暂停上传";
    },
    //上传之前
    handleBeforeUploadVideo(file) {
      //上传之前重新获取uptoken以免过期
      // console.log(file)
      this.progressFlag = true;
    },
    getUp(){
      getUpToken().then(res=>{
        this.upToken = res;
        console.log("后台获取token--",this.upToken);
      });
    },
    //
    uploadWithSDK(token,putExtra,config,domain,file) {
      let that = this;
      console.log("token,",token);
      console.log("putExtra,",putExtra);
      console.log("config,",config);
      console.log("domain,",domain);
      console.log("file,",file);
      if (file) {
        let key =uuidv4() + file.name;
        // putExtra.customVars["x:name"] = key.split(".")[0];
        // 设置next,error,complete对应的操作，分别处理相应的进度信息，错误信息，以及完成后的操作
        let error = function(err) {
          console.log(err);
        };

        let complete = function(res) {
          console.log(res);
          that.fileName =that.domainAddress + res.key;
          console.log(that.fileName);
        };

        let next = function(response) {
          console.log(response);
          that.loadProgress = response.total.percent;
        };

        let subObject = {
          next: next,
          error: error,
          complete: complete
        };
        // 调用sdk上传接口获得相应的observable，控制上传和暂停
        let observable = qiniu.upload(file, key, token, putExtra, config);
        let subscription = observable.subscribe(subObject);

        //监听按钮事件，控制上传
        that.$nextTick(function () {
          document.getElementById("myBtn").addEventListener("click", function(){
            console.log("1111111111111111111111111111111111111111")
            if(that.buttonText == "暂停上传"){
              that.buttonText = "继续上传";
              subscription.unsubscribe();
            }else if(that.buttonText = "继续上传"){
              that.buttonText = "暂停上传";
              subscription = observable.subscribe(subObject);
            }
          });
        })

      }

    },
    requestFile(param) {
      console.log("request,",param)
      let file = param.file;
      //uptoken
      let token = this.upToken;
      //外链域名
      let domain = this.domainAddress;
      //可以配置分片大小等配置，具体查看官方文档
      let config = {
        useCdnDomain: false,//是否使用CDN加速域名
        disableStatisticsReport: false,//是否禁用日志报告
        retryCount: 6,//上传自动重试次数
        chunkSize: "4"// 每片大小
      };
      let putExtra = {
        customVars: {}
      };
      this.uploadWithSDK(token,putExtra,config,domain,file)
    }
  },
  created () {
    this.getUp();
  }
}
</script>
